<ng-container *ngIf="type === 'line'">
  <div id="devui-progress-line-{{ id }}" class="devui-progress devui-progress-line" [style.height]="strokeWidth + 'px'">
    <div
      *ngFor="let bar of progressData"
      class="devui-progress-bar"
      [class.devui-progress-bar-default-bg]="!bar.color"
      [style.background]="bar.color"
      [style.width]="bar.width + '%'"
    >
      <ng-template
        *ngIf="showContentConfig.showInnerContent"
        [ngTemplateOutlet]="bar.template || defaultInnerContent"
        [ngTemplateOutletContext]="{ $implicit: this, bar: bar }"
      ></ng-template>
    </div>
    <ng-template
      *ngIf="showContentConfig.showCenterContent"
      [ngTemplateOutlet]="centerTemplate || defaultCenterContent"
      [ngTemplateOutletContext]="{ $implicit: this }"
    ></ng-template>
  </div>
  <ng-template
    *ngIf="showContentConfig.showOuterContent"
    [ngTemplateOutlet]="outerTemplate || defaultPercentageText"
    [ngTemplateOutletContext]="{ $implicit: this, percentage: percentage }"
  ></ng-template>
</ng-container>

<ng-container *ngIf="type === 'circle'">
  <div id="devui-progress-circle-{{ id }}" class="devui-progress devui-progress-circle">
    <svg viewBox="0 0 100 100">
      <defs *ngIf="isGradient">
        <linearGradient id="devui-progress-gradient-{{ id }}" x1="100%" y1="0%" x2="0%" y2="0%">
          <stop *ngFor="let color of gradientColor" [attr.offset]="color.percentage" [attr.stop-color]="color.color"></stop>
        </linearGradient>
      </defs>
      <path
        class="devui-progress-circle-trail"
        fill-opacity="0"
        [attr.d]="pathString"
        [attr.stroke-width]="strokeWidth"
        [ngStyle]="trailPath"
      ></path>
      <path
        *ngFor="let circle of progressData"
        fill-opacity="0"
        [attr.d]="pathString"
        [attr.stroke]="circle.color"
        [attr.stroke-linecap]="'round'"
        [attr.stroke-width]="circle.percentage ? strokeWidth : 0"
        [class.devui-progress-circle-path]="!isGradient"
        [ngStyle]="circle.strokePath"
      >
        <title>{{ circle.percentageText ? circle.percentageText : circle.percentage + '%' }}</title>
      </path>
    </svg>
    <ng-template
      *ngIf="showContentConfig.showCenterContent"
      [ngTemplateOutlet]="centerTemplate || defaultPercentageText"
      [ngTemplateOutletContext]="{ $implicit: this, percentage: percentage }"
    ></ng-template>
  </div>
</ng-container>

<ng-template #defaultInnerContent let-bar="bar">
  <span [style.line-height]="strokeWidth + 'px'" [title]="bar.percentageText ? bar.percentageText : bar.percentage + '%'">
    {{ bar.percentageText ? bar.percentageText : bar.percentage + '%' }}
  </span>
</ng-template>

<ng-template #defaultCenterContent>
  <span [style.line-height]="strokeWidth + 'px'" [title]="content">{{ content }}</span>
</ng-template>

<ng-template #defaultPercentageText>
  <div class="devui-progress-default-text" [title]="content">{{ content }}</div>
</ng-template>
